<template>
  <div>
    <!--     <el-container height="40%"> -->
    <!-- <el-header height="10%"> -->
    <el-row style="width: 100%;height: 28px;">
      <el-col :span="2">
        <el-switch v-model="value" style="width: 100%;height: 24px;" active-color="#13ce66" inactive-color="#ff4949">
        </el-switch>
      </el-col>
      <el-col :span="2">
        <el-color-picker v-model="color" style="width: 100%;height: 24px;" size="mini" @change="allColorChanged"></el-color-picker>
      </el-col>
    </el-row>
    <!-- </el-header> -->
    <!-- <el-main style="padding: 0px;"> -->
    <el-table ref="multipleTable" :data="tableData" highlight-current-row height="calc(100% - 28px)" tooltip-effect="dark" style="width: 100%;height:calc(100% - 28px);" @select="onTableSelect" @select-all="selectAll" @selection-change="handleSelectionChange" @row-click="rowClick" :header-cell-style="{padding:'0px',background: '#524540'} " :cell-style="{padding:'1px'}" :row-style="TableRowStyle">
      <el-table-column type="selection" prop="select" width="45" fixed="left">
      </el-table-column>
      <el-table-column prop="neuroncolor" label="Color" width="80">
        <template slot-scope="scope">
          <el-color-picker v-model=scope.row.neuroncolor size="mini" @change="((param)=>{colorChanged(param,scope.row)})">
          </el-color-picker>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="Name" width="80">
      </el-table-column>
      <el-table-column prop="sampleid" label="Sample" width="80">
      </el-table-column>
      <el-table-column prop="region" label="Region" show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <!-- </el-main> -->
    <!-- </el-container> -->
  </div>
</template>
<script>
import axios from 'axios'
import { globalBus } from './globalBus';
export default {


  data() {
    return {
      tableData: null,
      value: true,
      color: '#409EFF',

      checkAll: false
    }
  },
  mounted() {
    globalBus.$on("getNeuronformSampleID", id => {
        // debugger;
        // alert(id);

        axios.get('api/user/selectNeurons?id='+id, {
          id
        }).then(res => {
          // debugger

          for (var i = res.data.length - 1; i >= 0; i--) {
            res.data[i].neuroncolor = this.randomHexColor();
            res.data[i].select = 0;
          }
          if (this.tableData == null) {
            this.tableData = (res.data);
          } else {
            this.preData = this.tableData;
            this.tableData = this.tableData.concat(res.data);
            this.tableData.map(row => {
              // debugger
              this.$nextTick(() => {
                this.$refs.multipleTable.toggleRowSelection(row, Boolean(row.select));

              })
            })
          }
          // debugger

        }).catch(err => {
          console.log(err)
        })
      }),
      globalBus.$on("removeNeuronformSampleID", id => {
        let count = this.tableData.length;
        for (var i = count - 1; i >= 0; i--) {
          let row = this.tableData[i];
          // this.$refs.multipleTable.selection;

          if (row.sampleid == id) {
            this.$nextTick(() => {
              this.$refs.multipleTable.toggleRowSelection(row, false);
              this.onTableSelect(this.$refs.multipleTable.selection, row);

            })
            // console.log(row.sampleid,row.name);
            this.tableData.splice(i, 1);
          }
        }
      }),
      globalBus.$on("highlightNeuron", neuron => {
        // debugger
        let count = this.tableData.length;
        for (var i = count - 1; i >= 0; i--) {
          let row = this.tableData[i];
          if (row.sampleid == neuron[0] && row.name == neuron[1]) {
            this.$nextTick(() => {
              this.$refs.multipleTable.setCurrentRow(row)
              let curIndex = -1;

              // 如果当前索引变化
              if (curIndex !== this.tableData.indexOf(row)) {
                let vmEl = this.$refs.multipleTable.$el;
                if (vmEl) {
                  // 计算滚动条的位置
                  const targetTop = vmEl.querySelectorAll('.el-table__body tr')[this.tableData.indexOf(row)].getBoundingClientRect().top
                  const containerTop = vmEl.querySelector('.el-table__body').getBoundingClientRect().top
                  if (targetTop - containerTop - 300 > this.$refs.multipleTable.bodyWrapper.scrollTop ||
                    curIndex < this.tableData.indexOf(row)) {
                    this.$refs.multipleTable.bodyWrapper.scrollTop = targetTop - containerTop;
                  }
                }
              }
            })
          }
        }
      })
  },

  methods: {
    allColorChanged(color) {
      let count = this.tableData.length;
      for (var i = count - 1; i >= 0; i--) {
        let row = this.tableData[i];
        if (row.select) {
          row.neuroncolor = color;
          globalBus.$emit('setNeuronColor', [row.sampleid, row.name, row.neuroncolor]);

        }
      }
    },
    colorChanged(color, row) {
      if (row.select) {
        globalBus.$emit('setNeuronColor', [row.sampleid, row.name, row.neuroncolor]);

      }
    },
    TableRowStyle({ row, rowIndex }) {
      let rowBackground = {};
      if (row) {
        rowBackground.background = "#524540";
        rowBackground.hover = "#aaaaaa";
        return rowBackground;
      }
    },
    handleSelectionChange(selects) {


    },
    rowClick(row) {
        globalBus.$emit('selectNeuron', [row.sampleid, row.name]);


    },
    selectAll(selection) {
      this.checkAll = !this.checkAll;
      console.log(this.checkAll)
      this.tableData.map(row => {
        // debugger
        this.onTableSelect(selection, row);
        // this.$refs.multipleTable.toggleRowSelection(row, this.checkAll);
      })
    },
    onTableSelect(rows, row) {
      let selected = rows.length && rows.indexOf(row) !== -1
      console.log(selected) // true就是选中，0或者false是取消选中
      console.log(row.sampleid, row.name)
      if (selected) {
        row.select = 1;
        globalBus.$emit('getNeuron', [row.sampleid, row.name, row.neuroncolor]);
      } else {
        // debugger
        globalBus.$emit('removeNeuron', [row.sampleid, row.name]);
      }
    },

    randomHexColor() { //随机生成十六进制颜色
      return '#' + ('00000' + ((Math.random() * 0x1000000 << 0)).toString(16)).substr(-6);
    }

  }
}

</script>
<style scoped>
div {

  height: 40%;

  background: #524540;
  color: #ffffff;
}

.el-table .cell {
  line-height: 10px !important;
}

>>>.el-switch__core {
  width: 30px !important;
  height: 15px;
  /*color:#409EFF;*/
}

/*设置圆*/
>>>.el-switch__core::after {
  width: 14px;
  height: 14px;
  margin-top: -1px;
  margin-bottom: 2px;
}

/deep/ .el-table tbody tr:hover>td {
  background-color: #888888
}

/deep/ .el-table__body tr.current-row>td {
  color: #fff;
  background: #409EFF !important;
}

.el-color-picker__trigger .el-icon-arrow-down:before {
  /*content: "\e671" !important;*/
  font-size: 10px;
}

.el-color-picker__trigger {
  border: none;
}

.el-color-picker__color {
  border: none;
}

</style>
